<template>
  <el-row>
        <el-row class="search">
           <el-col :span="8" class="info">
             <span>单程： {{info.departCity}} - {{info.destCity}} / {{info.departDate}}</span>
           </el-col>
           <el-col :span="16" class="search-input">
             <el-select size="mini" placeholder="起飞机场" v-model="airport" @change="filterData">
               <el-option
               v-for="(item,index) in options.airport"
               :key="index"
               :label="item"
               :value="item"
               >
               </el-option>
             </el-select>
             <!-- 对于起飞时间的 value 值其实并非固定,
                最终要飞机起飞时间大于 from 小于 to 才能放行
                最终是由我们自己进行比较和筛选
                这里的 value 可以我们自己定义格式
                只要后面的筛选按照这个格式去用就可以了
                如 6,12 -->
             <el-select size="mini" placeholder="起飞时间" v-model="flightTimes" @change="filterData">
               <el-option
               v-for="(item,index) in options.flightTimes"
               :key="index"
               :label="`${item.from}:00 - ${item.to}:00`"
               :value="`${item.from},${item.to}`"
               >
               </el-option>
             </el-select>
             <el-select size="mini" placeholder="航空公司" v-model="airCompany" @change="filterData">
               <el-option
               v-for="(item,index) in options.company"
               :key="index"
               :label="item"
               :value="item"
               >
               </el-option>
             </el-select>
             <el-select size="mini" placeholder="机型" v-model="planeSize" @change="filterData">
               <el-option
               v-for="(item,index) in planeSizeArr"
               :key="index"
               :label="item.label"
               :value="item.value"
               >
               </el-option>
             </el-select>
           </el-col>
        </el-row>
        <el-row class="cancel">
          筛选：<el-button type="primary" plain size="mini" @click.native="reset">撤销</el-button>
        </el-row>
      </el-row>
</template>

<script>
export default {
    // props 的其他格式
    // 父子组件可能不是同一个人写的, 
    // 如果子组件想要规定某个属性的类型
    // 就不能这样声明了
    // 第一种最简单写法
    // props: ['msg']
    // 第二种可以设置数据类型限制的写法
    // props 是一个对象
    // 里面的 key:value
    // 就是字段名和 数据类型的配对
    // props: {
    //     msg: String
    // }
    // 还有第三种写法, 可以给一个属性添加默认值
    // 允许父组件不传值
    // 如果我希望即使父组件不传值, 默认就是密码框,
    // 只有当父组件强硬说要 text 我才给一个默认 text 输入框
    // 如果你想设置默认值, 就不能直接给value 一个数据类型, 而应该改成对象
    // props: {
    //     type: String
    // }
    // props: {
    //     type: {
    //         type: String,
    //         default: 'password'
    //     }
    // }
    // data: {
    //         type: Object,
    //         // 默认是空数组
    //         这里返回函数 
    //         default: () => {
    //             return {}
    //         }
    //     }
  props:{
    info:{
      type:Object,
      default:() => {
        return {};
      }
    },
    options:{
      type:Object,
      default:() => {
        return {};
      }
    },
    airList:{
      type:Array,
      default:() => {
        return [];
      }
    }
  },
  data(){
    return{
      airport:'',
      flightTimes:'',
      airCompany:'',
      planeSize:'',
      planeSizeArr: [
          {
              label: '大',
              value: 'L'
          },
          {
              label: '中',
              value: 'M'
          },
          {
              label: '小',
              value: 'S'
          }
      ]
    }
  },
  methods:{
     filterData(){
       //复制数据 
       let newList = [...this.airList];

       if(this.airport){
          newList = newList.filter(item => {
             return item.org_airport_name == this.airport;
          });
       }
       if(this.airCompany){
          newList = newList.filter(item => {
             return item.airline_name == this.airCompany;
          });
       }
       if(this.planeSize){
          newList = newList.filter(item => {
             return item.plane_size == this.planeSize;
          });
       }
       if(this.flightTimes){
         newList = newList.filter(item => {
           let arr = this.flightTimes.split(',');
           let startTime = Number(item.dep_time.split(':')[0]);
           return startTime >= Number(arr[0]) && startTime <= Number(arr[1]);
         })
       }
       this.$emit('loadFilterData',newList);
     },
     reset(){
       this.airport = '';
       this.flightTimes = '';
       this.airCompany = '';
       this.planeSize = '';
       this.filterData();
     }
  }
}
</script>
<style lang="less" scoped>
.search{
  .info{
    height: 30px;
    line-height: 30px;
    span{
      font-size: 14px;
      color: #000000;
    }
  }
  .search-input{
    display: flex;
    .el-select{
      margin-left: 10px;
    }
  }
}
.cancel{
   margin-top: 8px;
   font-size: 14px;
   color: #000;
  .el-button{
     border-radius: 28px;
  }
}
</style>